<script setup>
import {ref} from 'vue'
import uniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import Week24 from "../apply/component/week24.vue";
import Week0To2 from "../apply/component/week02.vue";
import Week48 from "../apply/component/week48.vue";
import Weekover8 from '../apply/component/weekover8.vue'
import AddressPicker from "../../components/lingdang-AddressPicker/AddressPicker.vue";
import AllAddress from "../../components/lingdang-AddressPicker/AddressData.js"

let inputValue_1 = null
let inputValue_2 = null
let inputValue_4 = null
let inputValue_6 = null
const inputValue_7 = ref('')
const inputValue_8 = ref('')
let inputValue_9 = null
let inputValue_11 = null
let inputValue_12 = null
let inputValue_13 = null

const btnEvent = () => {
  console.log(inputValue_1)
  console.log(inputValue_2)
  console.log(inputValue_4)
  console.log(inputValue_6)
  console.log(inputValue_7)
  console.log(inputValue_8)
  console.log(inputValue_9)
  console.log(inputValue_11)
  console.log(inputValue_12)
  console.log(inputValue_13)
  if(inputValue_1&&inputValue_2&&inputValue_4&&inputValue_7&&inputValue_8&&inputValue_9&&inputValue_11&&inputValue_12&&inputValue_13){
    alert("提交成功")
    uni.navigateTo({url: '/pages/apply/showPages'})
  }else{
    alert("提交失败，请输入完整信息!")
  }
}

const timeDifference = ref('')

const changeTime = function (value) {
  console.log(value)
  if (inputValue_7.value && inputValue_8.value) {
    const timetamp_1 = new Date(inputValue_7.value).getTime();
    const timetamp_2 = new Date(inputValue_8.value).getTime();

    const days = Math.ceil(Math.abs(timetamp_2 - timetamp_1) / (1000 * 3600 * 24))
    timeDifference.value = days;
    console.log(days)
  }
}

const address = ref('请选择地址')
const address_1 = ref('请选择地址')

const addressChange = (value) => {
  const indexArr = value.detail.value
  address.value = AllAddress[indexArr[0]].name + '/' + AllAddress[indexArr[0]].children[indexArr[1]].name + '/' + AllAddress[indexArr[0]].children[indexArr[1]].children[indexArr[2]].name
}

const addressChange_1 = (value) => {
  const indexArr = value.detail.value
  address_1.value = AllAddress[indexArr[0]].name + '/' + AllAddress[indexArr[0]].children[indexArr[1]].name + '/' + AllAddress[indexArr[0]].children[indexArr[1]].children[indexArr[2]].name
}

let number = ref(0)

const addList = () => {
  if (number.value == 0) {
    number.value += 1;
    console.log(number.value)
  }
}

const reduceList = () => {
  if (number.value == 1) {
    number.value -= 1;
    console.log(number.value)
  }
}

</script>

<template>
  <view id="top-background">
  </view>
  <view id="background_1">
    <view id="h1">
      <view id="h1_1">
        <view id="h1_2">
          <text style="color: red">*</text>
          是否离开武汉
        </view>
        <view id="sel">
          <select id="sel_1" v-model="inputValue_1">
            <option>是</option>
            <option>否</option>
          </select>
        </view>
      </view>
      <hr>
      <view id="h1_3">
        <view id="h1_4">
          <text style="color: red">*</text>
          请假类型
        </view>
        <view id="sel">
          <select id="sel_2" v-model="inputValue_2">
            <option>回家</option>
            <option>探亲</option>
            <option>研学</option>
            <option>其他</option>
          </select>
        </view>
      </view>
    </view>
  </view>
  <view id="background_2">
    <view id="h2_zero" v-if="number == 0">
      <view>
        <view id="h2_1">
          <view id="h2_1_1">
            请填写离校目的地的地址(非出发地)
          </view>
          <view id="h2_1_2">
            <view id="bt_1" @click="addList">
              <view id="bt_h1">
                <image src="/static/image/picture/buttonDecoration.png" id="picture"></image>
              </view>
              <view id="bt_h2">
                添加
              </view>
            </view>
          </view>
        </view>
      </view>
      <view id="h2_2_1">
        <view class="h2_2_1_1">
          <view class="h2_2_1_1_1">
            <text style="color: red">*</text>
            所在地区
          </view>
          <view class="sel">
            <AddressPicker @change="addressChange" :level="3">{{ address }}</AddressPicker>
          </view>
        </view>
        <hr>
        <view>
          <view class="h2_2_1_1_2">
            <view>
              <image src="/static/image/picture/delete.png" id="picture_1" @click="reduceList"></image>
            </view>
            <view id="t1">
              <text style="color: red">*</text>
              详细地址
            </view>
          </view>
          <view class="textarea_1">
            <textarea placeholder="请详细填写地址信息，如小区名门牌号等" v-model="inputValue_4">
            </textarea>
          </view>
        </view>
      </view>
    </view>
    <view id="h2_one" v-if="number >= 1">
      <view id="h2_1">
        <view id="h2_1_1">
          请填写离校目的地的地址(非出发地)
        </view>
        <view id="h2_1_2">
          <view id="bt_1" @click="addList">
            <view id="bt_h1">
              <image src="/static/image/picture/buttonDecoration.png" id="picture"></image>
            </view>
            <view id="bt_h2">
              添加
            </view>
          </view>
        </view>
      </view>
      <view id="h2_2_1">
        <view class="h2_2_1_1">
          <view class="h2_2_1_1_1">
            <text style="color: red">*</text>
            所在地区
          </view>
          <view class="sel">
            <AddressPicker @change="addressChange" :level="3">{{ address }}</AddressPicker>
          </view>
        </view>
        <hr>
        <view>
          <view class="h2_2_1_1_2">
            <view>
              <image src="/static/image/picture/delete.png" id="picture_1" @click="reduceList"></image>
            </view>
            <view id="t1">
              <text style="color: red">*</text>
              详细地址
            </view>
          </view>
          <view class="textarea_1">
            <textarea placeholder="请详细填写地址信息，如小区名门牌号等" v-model="inputValue_4">
            </textarea>
          </view>
        </view>
      </view>
      <view id="h2_2_2">
        <view class="h2_2_1_1">
          <view class="h2_2_1_1_1">
            <text style="color: red">*</text>
            所在地区
          </view>
          <view class="sel">
            <AddressPicker @change="addressChange_1" :level="3">{{ address_1 }}</AddressPicker>
          </view>
        </view>
        <hr>
        <view>
          <view class="h2_2_1_1_2">
            <view>
              <image src="/static/image/picture/delete.png" id="picture_1" @click="reduceList"></image>
            </view>
            <view id="t1">
              <text style="color: red">*</text>
              详细地址
            </view>
          </view>
          <view class="textarea_1">
                  <textarea placeholder="请详细填写地址信息，如小区名门牌号等" v-model="inputValue_6">
                  </textarea>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view id="backgorund_3">
    <view id="h3">
      <view class="h3_1">
        <view class="h3_1_1">
          <text style="color: red">*</text>
          开始时间
        </view>
        <view class="h3_1_2">
          <uni-datetime-picker type="date" v-model="inputValue_7" @change="changeTime">

          </uni-datetime-picker>

          <!-- 日期格式问题 -->

        </view>
      </view>
      <hr>
      <view class="h3_1">
        <view class="h3_1_1">
          <text style="color: red">*</text>
          结束时间
        </view>
        <view class="h3_1_2">
          <uni-datetime-picker type="date" v-model="inputValue_8" @change="changeTime">

          </uni-datetime-picker>

          <!-- 日期格式问题 -->

        </view>
      </view>
      <hr>
      <view class="h3_1">
        <view class="h3_1_1">
          <text style="color: red">*</text>
          请假时长
        </view>
        <view class="h3_1_3">
          {{ timeDifference }}天
        </view>
      </view>
    </view>
  </view>
  <view id="backgorund_4">
    <view id="h4">
      <view id="h4_1">
        <text style="color: red">*</text>
        请假理由
        <view id="text_1">
          <textarea v-model="inputValue_9" placeholder="请详细填写您的请假理由，以便辅导员快速通过审核，字数不超过100字">
          </textarea>
        </view>
      </view>
    </view>
  </view>
  <view id="backgorund_5">
    <view id="h5">
      <view id="h5_1">
        附件
      </view>
      <view id="h5_2">
        病假的同学请上传医院证明，其余请假同学请上传其他证明材料，图片单张大小不超过2M
      </view>
      <view id="image_1">

      </view>
      <view id="image_2">
        <uni-file-picker
            v-model="imageValue"
            fileMediatype="image"
            mode="grid"
            :limit="3"
            @select="select"
            @progress="progress"
            @success="success"
            @fail="fail"
        />
      </view>
    </view>
  </view>
  <view id="backgorund_3">
    <view id="h3">
      <view class="h3_1">
        <view class="h3_1_1">
          <text style="color: red">*</text>
          本人联系电话
        </view>
        <view class="h3_1_2">
          <input type="text" placeholder="请输入" v-model="inputValue_11">
        </view>
      </view>
      <hr>
      <view class="h3_1">
        <view class="h3_1_1">
          <text style="color: red">*</text>
          紧急联系人姓名
        </view>
        <view class="h3_1_2">
          <input type="text" placeholder="请输入" v-model="inputValue_12">
        </view>
      </view>
      <hr>
      <view class="h3_1">
        <view class="h3_1_1">
          <text style="color: red">*</text>
          紧急联系人电话
        </view>
        <view class="h3_1_2">
          <input type="text" placeholder="请输入" v-model="inputValue_13">
        </view>
      </view>
    </view>
  </view>
  <view v-if="timeDifference <= 14 && timeDifference > 0">
    <view id="lessTwoWeeks">
      <view id="les_1">
        <week-0-to-2></week-0-to-2>
      </view>
    </view>
    <view id="bt_background">
      <view id="bt_bottom" @click="btnEvent">
        <view id="pass">
          提交
        </view>
      </view>
    </view>
  </view>
  <view v-if="timeDifference <= 28 && timeDifference > 14">
    <view id="lessTwoWeeks">
      <view id="les_1">
        <week-2-4></week-2-4>
      </view>
    </view>
    <view id="bt_background">
      <view id="bt_bottom" @click="btnEvent">
        <view id="pass">
          提交
        </view>
      </view>
    </view>
  </view>
  <view v-if="timeDifference <= 56 && timeDifference > 28">
    <view id="lessTwoWeeks">
      <view id="les_1">
        <week-4-8></week-4-8>
      </view>
    </view>
    <view id="bt_background">
      <view id="bt_bottom" @click="btnEvent">
        <view id="pass">
          提交
        </view>
      </view>
    </view>
  </view>
  <view v-if="timeDifference > 56">
    <view id="lessTwoWeeks">
      <view id="les_1">
        <weekover-8></weekover-8>
      </view>
    </view>
    <view id="bt_background">
      <view id="bt_bottom_disable">
        <view id="pass">
          提交
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
#top-background {
  width: 100%;
  height: 70px;
  background: linear-gradient(180.00deg, #2264ff 0%, #f5f5f5 100%);
}

#background_1 {
  display: flex;
  justify-content: center;
}

#background_2 {
  display: flex;
  justify-content: center;
}

#backgorund_3 {
  display: flex;
  justify-content: center;
}

#backgorund_4 {
  display: flex;
  justify-content: center;
}

#backgorund_5 {
  display: flex;
  justify-content: center;
}

#h1 {
  width: 345px;
  height: 99px;
  border-radius: 12px;
  background: #fff;
  margin-top: -50px;
  box-shadow: 0 2px 4px #c8c7cc;
  padding: 10px;
}

#h1_1 {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}

#h1_2 {
  width: 150px;
  height: 40px;
}

#h1_3 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

#h1_4 {
  display: flex;
  justify-content: space-between;
}

.sel {
  margin-top: 8px;
  width: 200px;
  height: 10px;
  font-size: 12px;
}

#sel_1 {
  border-color: #f8f8f8;
  width: 50px;
  height: 20px;
}

#sel_2 {
  border-color: #f8f8f8;
  width: 50px;
  height: 20px;
}

#h2_zero {
  width: 360px;
  height: 220px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #c8c7cc;
  margin-top: 20px;
}

#h2_one {
  width: 360px;
  height: 380px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 4px #c8c7cc;
  margin-top: 20px;
}

#h2_1 {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

#h3 {
  width: 360px;
  height: 154px;
  border-radius: 12px;
  margin-top: 20px;
  background: #fff;
  box-shadow: 0 2px 4px #c8c7cc;
}

#h4 {
  width: 360px;
  height: 147px;
  border-radius: 12px;
  background: #fff;
  margin-top: 20px;
  box-shadow: 0 2px 4px #c8c7cc;
}


.h3_1 {
  display: flex;
  padding: 10px;
  justify-content: space-between;
}

.h3_1_1 {
  width: 150px;
  height: 30px;
}

.h3_1_2 {
  width: 200px;
  height: 30px;
}

.h3_1_3 {
  width: 200px;
  height: 30px;
  margin-right: -120px;
}

#h4_1 {
  width: 320px;
  height: 30px;
  padding: 10px;
}

#h5 {
  width: 360px;
  height: 179px;
  border-radius: 12px;
  margin-top: 20px;
  background: #fff;
  box-shadow: 0 2px 4px #c8c7cc;
}


#h2_2_1 {
  width: 316px;
  height: 140px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #c0c0c0;
  margin-left: 16px;
  padding: 5px;
}

#h2_2_2 {
  margin-top: 10px;
  width: 316px;
  height: 140px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #c0c0c0;
  margin-left: 16px;
  padding: 5px;
}

.h2_2_1_1 {
  display: flex;
  justify-content: space-between;
}

.h2_2_1_1_1 {
  margin-top: 5px;
  width: 100%;
  height: 35px;
}

.h2_2_1_1_2 {
  margin-top: 5px;
  width: 100%;
  height: 60px;
  display: flex;
}

#h5_1 {
  padding: 10px;
}

#h5_2 {
  width: 330px;
  height: 46px;
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 12px;
  text-align: left;
  color: #999999;
  padding: 10px;
  margin-top: -20px;
}

.textarea_1 {
  width: 100%;
  height: 70px;
  margin-top: -35px;
}

#text_1 {
  padding: 10px;
  width: 100%;
  margin-bottom: 20px;
  font-size: 12px;
  text-align: left;
}

#image_1 {
  width: 80px;
  height: 80px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
}

#image_2 {
  width: 250px;
  height: 250px;
  margin-left: 12px;
  margin-top: -78px;
}

#lessTwoWeeks {
  display: flex;
  justify-content: center;
}

#les_1 {
  padding: 10px;
  margin-top: 20px;
}

#bt_background {
  display: flex;
  justify-content: center;
}

#bt_bottom {
  width: 330px;
  height: 50px;
  border-radius: 25px;
  background: #2264ff;
  box-shadow: 0 5px 10px #2264ff33;
  color: #f8f8f8;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 30px;
}

#bt_bottom_disable {
  width: 330px;
  height: 50px;
  border-radius: 25px;
  background: #6a6a6a;
  box-shadow: 0 5px 10px #2264ff33;
  color: #f8f8f8;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 30px;
}

#pass {
  font-family: "PingFang SC Bold";
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  align-content: center;
  color: #fff;
}

#bt_1 {
  display: flex;
  justify-content: space-between;
  width: 60px;
  height: 28px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #2264ff;
}

#picture {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  margin-left: 3px;
}

#picture_1 {
  width: 20px;
  height: 20px;
  background: #fff;
  margin-top: 30px;

}

#bt_h2 {
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  color: #2264ff;
  margin-right: 7px;
  margin-top: 3px;
}

#picture_1 {
  margin-top: -20px;
  margin-left: -15px;
}

#t1 {
  margin-left: 5px;
}
</style>